<template>
  <div>
    <el-table
      ref="singleTable"
      :data="cutObj.records"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      style="
        width: 750px;
        height: 200px;
        border: 1px solid #dcdfe6;
        margin: 30px;
      "
    >
      <el-table-column property="regionId" width="50"> </el-table-column>
      <el-table-column property="regionName" label="区域名称" width="180">
      </el-table-column>
      <el-table-column property="regionForest" label="林种" width="120">
      </el-table-column>
      <el-table-column property="regionType" label="地类" width="120">
      </el-table-column>
      <el-table-column property="regionTree" label="优势树种" width="120">
      </el-table-column>
      <el-table-column
        property="classBean.className"
        label="负责小班"
        width="150"
      >
      </el-table-column>
    </el-table>

    <div class="check">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="cutObj.pages * 10"
          @current-change="handleChange"
          @click="get()"
          style="margin-left: 100px; margin-bottom: 100px"
        >
        </el-pagination>

        <div style="margin: 20px 100px">
          <el-button @click="addregion()">添加区域</el-button>
        </div>
      </div>
      <div>
        <div>
          <fieldset style="width: 310px">
            <legend>查询区域信息</legend>
            <form action="">
              <span>区域名称：</span>
              <input type="text" v-model="regionName" style="margin: 20px" />
              <br />
              <span>林种：</span>
              <input
                type="text"
                v-model="regionForest"
                style="margin: 20px 43px"
              />
              <br />
              <span>负责小班：</span
              ><input type="text" v-model="classBean" style="margin: 20px" />
              <br />
              <el-button
                type="primary"
                @click="get()"
                style="margin-left: 130px"
                >查 询</el-button
              >
            </form>
          </fieldset>
        </div>
      </div>
    </div>

    <el-dialog
      title=""
      :visible.sync="dialog"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">添加区域</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px; margin: 20px auto">
          <p style="margin: 50px 30px">
            名称：<input type="text" v-model="regionName" />
          </p>
          <p style="margin: 50px 30px">
            林种：<input type="text" v-model="regionForest" />
          </p>
          <p style="margin: 50px 30px">
            林种：<input type="text" v-model="regionTree" />
          </p>
          <p style="margin: 50px 30px">
            地类：
            <select v-model="regionType">
              <option>林地</option>
              <option>疏林地</option>
              <option>灌木地</option>
              <option>苗圃地</option>
            </select>
          </p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      pageNo: "",
      pages: "",
      regionId: "",
      regionName: "",
      regionForest: "",
      regionTree: "",
      regionType: "",
      classBean: "",
      regionList: [],
      dialogVisible: false,
      dialog: false,
    };
  },
  computed: {
    ...mapState("region", ["cutObj", "param"]),
  },
  methods: {
    ...mapMutations("region", ["setParam"]),
    ...mapActions("region", ["findByItem"]),

    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    get() {
      let paramObj = this.param;
      paramObj.regionName = this.regionName;
      paramObj.regionForest = this.regionForest;
      paramObj.classBean = this.classBean;
      // 把最新的信息装入 store中的 param对象中
      this.setParam(paramObj);
      this.findByItem();
    },
    cut(pageNo) {
      let paramObj = this.param;
      paramObj.pageNo = pageNo;
      this.setParam(paramObj);
      this.findByItem();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleTableRow(row) {
      console.log(row.regionId);

      this.regionId = row.regionId;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addregion() {
      this.dialog = true;
    },

    async add() {
      let regionobj = {
        regionName: this.regionName,
        regionForest: this.regionForest,
        regionTree: this.regionTree,
        regionType: this.regionType,
      };

      if (
        this.regionName != null &&
        this.regionForest != null &&
        this.regionTree != null &&
        this.regionType != null
      ) {
        let Obj = await this.ajax.getSubmit("/api/region/addRegion", regionobj);

        console.log(Obj);

        if (Obj != null) {
          alert("添加成功");
        }
      }

      this.dialog = false;
    },
  },
  created() {
    this.findByItem();
  },
};
</script>

<style>
.check {
  display: flex;
}
.check > div:first-child {
  width: 450px;
  height: 200px;
}

.check > div:nth-child(2) {
  width: 300px;
  height: 200px;
}
</style>